<template>
  <div class="header">
        <div class="header-title">
          <i class="el-icon-menu"></i>
          <span class="name">后台管理中心</span>
        </div>
        <div class="header-foot">
          <div class="header-foot-in">
            <img  class="header-foot-in-img"  src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1114950549,3671164948&fm=27&gp=0.jpgg">
            <span>{{this.user.name}}</span>
          </div>
          <div>
              <span @click="out">退出登录</span>
          </div>
            
          
        </div>
  </div>

</template>

<style lang="scss">
.header{
      width: 100%;
      height: 100%;
      background-color: #242f42;
      text-align: right;
      font-size: 20px;
      color: #ffffff;
      line-height: 1.4rem;
      .header-title{
        float: left;
        margin-left: .1rem;
      }
      .header-foot{
        float: right;
        margin-right: 1rem;
        height: 100%;
        display: flex;
        .header-foot-in {
          margin-right: 1rem;
          .header-foot-in-img{
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 0.7rem;
            margin-right: 0.4rem;    
          }
        }
      }
}
</style>


<script>
import {mapState} from 'vuex'
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    },
    computed : {
      ...mapState(['user'])
    },
    methods : {
      out() {
        //清除token
        this.$store.commit("removeToken")
        this.$router.push("/")
      }
    }
  };
</script>